<template>
    <div id="container">

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
import { getSimpleDataApi } from "@/api/dataTotal";

let myChart: any = null;

// x轴的数据
const xAxis = ref<any>([]);
// 销售数据：
const sales = ref<any>([]);

//获取数据
const getSimpleData = (cb: any) => {
    getSimpleDataApi().then(res => {
        if (res.data.code === "200") {
            xAxis.value = [];
            sales.value = [];
            res.data.data.forEach((item: any) => {
                xAxis.value.push(item.x);
                sales.value.push(item.val);
            })
            cb && cb();
        }
    })
}

// 初始化柱状图
const initBarChart = () => {
    myChart = echarts.init(document.getElementById('container'), 'dark');
}

const updateBarChart = () => {
    // 绘制图表
    myChart.setOption({
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},

        dataset: {
            // 提供一份数据。
            source: [
                ['product', '2015', '2016', '2017'],
                ['Matcha Latte', 43.3, 85.8, 93.7],
                ['Milk Tea', 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 86.4, 65.2, 82.5],
                ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
        },
        xAxis: [
            { type: 'category', gridIndex: 0 },
            { type: 'category', gridIndex: 1 }
        ],
        yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
        grid: [{ left: '55%' }, { right: '55%' }],
        series: [
            // 这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
            { type: 'bar', seriesLayoutBy: 'row' },
            { type: 'bar', seriesLayoutBy: 'row' },
            { type: 'bar', seriesLayoutBy: 'row' },
            // 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
            { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
            { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
            { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
            { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
        ]
    });
}

onMounted(() => {
    initBarChart();
    getSimpleData(updateBarChart);
    setInterval(() => {
        getSimpleData(updateBarChart);
    }, 2000);
});

</script>

<style lang="scss" scoped>
#container {
    width: 100%;
    height: 100%;
}
</style>